<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_Context传值</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
    let app = document.getElementById("app")
    let {Fragment,Component} = React

    /*class App extends Component {
        render() {
            return <Toolbar theme="red" />;
        }
    }

    function Toolbar(props) {
        // Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。
        // 如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事，
        // 因为必须将这个值层层传递所有组件。
        return (
            <div>
                <ThemedButton theme={props.theme} />
            </div>
        );
    }

    class ThemedButton extends Component {
        render() {
            return <Button theme={this.props.theme} />;
        }
    }

    class Button extends Component {
        render() {
            return <button style={{color: this.props.theme}} >按钮</button>
        }
    }
    ReactDOM.render(<App></App>,app)*/


    // Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
    // 为当前的 theme 创建一个 context，设置默认值为blue。
    const ColorContext = React.createContext('blue');
    class App extends Component {
        render() {
            // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
            // 无论多深，任何组件都能读取这个值。
            // 在这个例子中，我们将 “pink” 作为当前的值传递下去。
            return (<ColorContext.Provider value="pink">
                <Toolbar />
            </ColorContext.Provider>)
        }
    }
    // 中间的组件再也不必指明往下传递 theme 了。
    function Toolbar() {
        return (
            <div>
                <ThemedButton />
            </div>
        );
    }

    class ThemedButton extends Component {
        render() {
            return <Button />;
        }
    }

    class Button extends Component {
        constructor(props) {
            super(props);
        }
        //我们需要在用到ColorContext的地方先读取ColorContext
        //挂载在Button类里的contextType属性会被ColorContext赋值的对象赋值，只有contextType被赋值之后
        //我们才能用this.context语法来获取离我们最近的Context的值
        static contextType = ColorContext;

        render() {
            return <button style={{color: this.context}} >按钮</button>
        }
    }
    ReactDOM.render(<App></App>,app)
</script>
</body>
</html>